<template>
  <div class="table-general-panel-v2">
    <div class="max-w-4xl mx-auto">
      <!-- 表名和注释 -->
      <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
          <el-icon class="mr-2 text-primary"><Document /></el-icon>
          基本信息
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              表名 <span class="text-red-500">*</span>
            </label>
            <el-input
              v-model="localData.name"
              placeholder="输入表名"
              size="large"
              @change="handleChange"
            >
              <template #prefix>
                <el-icon><Grid /></el-icon>
              </template>
            </el-input>
            <p class="mt-1 text-xs text-gray-500">建议使用小写字母和下划线</p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              表注释
            </label>
            <el-input
              v-model="localData.comment"
              placeholder="输入表注释"
              size="large"
              @change="handleChange"
            >
              <template #prefix>
                <el-icon><InfoFilled /></el-icon>
              </template>
            </el-input>
            <p class="mt-1 text-xs text-gray-500">描述表的用途</p>
          </div>
        </div>
      </div>

      <!-- MySQL特有选项 -->
      <div v-if="databaseType === 'mysql'" class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
          <el-icon class="mr-2 text-primary"><Setting /></el-icon>
          MySQL 选项
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              存储引擎
            </label>
            <el-select
              v-model="localData.engine"
              placeholder="选择存储引擎"
              size="large"
              class="w-full"
              @change="handleChange"
            >
              <el-option
                v-for="engine in engineOptions"
                :key="engine.value"
                :label="engine.label"
                :value="engine.value"
              >
                <div class="flex items-center justify-between">
                  <span>{{ engine.label }}</span>
                  <span class="text-xs text-gray-400">{{ engine.description }}</span>
                </div>
              </el-option>
            </el-select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              字符集
            </label>
            <el-select
              v-model="localData.charset"
              placeholder="选择字符集"
              size="large"
              class="w-full"
              @change="handleCharsetChange"
            >
              <el-option
                v-for="charset in charsetOptions"
                :key="charset.value"
                :label="charset.label"
                :value="charset.value"
              />
            </el-select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              排序规则
            </label>
            <el-select
              v-model="localData.collation"
              placeholder="选择排序规则"
              size="large"
              class="w-full"
              @change="handleChange"
            >
              <el-option
                v-for="collation in collationOptions"
                :key="collation"
                :label="collation"
                :value="collation"
              />
            </el-select>
          </div>
        </div>
      </div>

      <!-- PostgreSQL特有选项 -->
      <div v-if="databaseType === 'postgresql'" class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
          <el-icon class="mr-2 text-primary"><Setting /></el-icon>
          PostgreSQL 选项
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              模式 (Schema)
            </label>
            <el-input
              v-model="localData.schema"
              placeholder="public"
              size="large"
              @change="handleChange"
            >
              <template #prefix>
                <el-icon><Folder /></el-icon>
              </template>
            </el-input>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              表空间
            </label>
            <el-input
              v-model="localData.tablespace"
              placeholder="默认表空间"
              size="large"
              @change="handleChange"
            />
          </div>
        </div>
      </div>

      <!-- SQL Server特有选项 -->
      <div v-if="databaseType === 'sqlserver'" class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
          <el-icon class="mr-2 text-primary"><Setting /></el-icon>
          SQL Server 选项
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              模式 (Schema)
            </label>
            <el-input
              v-model="localData.schema"
              placeholder="dbo"
              size="large"
              @change="handleChange"
            >
              <template #prefix>
                <el-icon><Folder /></el-icon>
              </template>
            </el-input>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              文件组
            </label>
            <el-input
              v-model="localData.filegroup"
              placeholder="PRIMARY"
              size="large"
              @change="handleChange"
            />
          </div>
        </div>
      </div>

      <!-- 达梦特有选项 -->
      <div v-if="databaseType === 'dameng'" class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
          <el-icon class="mr-2 text-primary"><Setting /></el-icon>
          达梦数据库选项
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              字符集
            </label>
            <el-select
              v-model="localData.charset"
              placeholder="选择字符集"
              size="large"
              class="w-full"
              @change="handleChange"
            >
              <el-option label="UTF8" value="UTF8" />
              <el-option label="GBK" value="GBK" />
              <el-option label="GB18030" value="GB18030" />
            </el-select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              表空间
            </label>
            <el-input
              v-model="localData.tablespace"
              placeholder="默认表空间"
              size="large"
              @change="handleChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Document, InfoFilled, Setting, Grid, Folder } from '@element-plus/icons-vue'

const props = defineProps({
  tableData: {
    type: Object,
    required: true
  },
  databaseType: {
    type: String,
    default: 'mysql'
  }
})

const emit = defineEmits(['update'])

// 本地数据副本
const localData = ref({
  name: '',
  comment: '',
  engine: 'InnoDB',
  charset: 'utf8mb4',
  collation: 'utf8mb4_general_ci',
  schema: '',
  tablespace: '',
  filegroup: ''
})

// 监听props变化
watch(() => props.tableData, (newData) => {
  Object.assign(localData.value, newData)
}, { immediate: true, deep: true })

// MySQL存储引擎选项
const engineOptions = [
  { label: 'InnoDB', value: 'InnoDB', description: '支持事务、外键' },
  { label: 'MyISAM', value: 'MyISAM', description: '快速但不支持事务' },
  { label: 'Memory', value: 'Memory', description: '内存表，速度快' },
  { label: 'Archive', value: 'Archive', description: '压缩存储' },
  { label: 'CSV', value: 'CSV', description: 'CSV格式' },
  { label: 'Federated', value: 'Federated', description: '远程表' }
]

// 字符集选项
const charsetOptions = [
  { label: 'utf8mb4', value: 'utf8mb4' },
  { label: 'utf8', value: 'utf8' },
  { label: 'latin1', value: 'latin1' },
  { label: 'gbk', value: 'gbk' },
  { label: 'big5', value: 'big5' }
]

// 排序规则选项（根据字符集动态生成）
const collationOptions = computed(() => {
  const collations = {
    'utf8mb4': [
      'utf8mb4_general_ci',
      'utf8mb4_unicode_ci',
      'utf8mb4_bin',
      'utf8mb4_0900_ai_ci',
      'utf8mb4_0900_as_cs'
    ],
    'utf8': [
      'utf8_general_ci',
      'utf8_unicode_ci',
      'utf8_bin'
    ],
    'latin1': [
      'latin1_swedish_ci',
      'latin1_general_ci',
      'latin1_bin'
    ],
    'gbk': [
      'gbk_chinese_ci',
      'gbk_bin'
    ]
  }
  
  return collations[localData.value.charset] || []
})

// 处理变更
const handleChange = () => {
  emit('update', { ...localData.value })
}

// 处理字符集变更
const handleCharsetChange = () => {
  // 重置排序规则为新字符集的默认值
  const defaultCollations = {
    'utf8mb4': 'utf8mb4_general_ci',
    'utf8': 'utf8_general_ci',
    'latin1': 'latin1_swedish_ci',
    'gbk': 'gbk_chinese_ci'
  }
  
  localData.value.collation = defaultCollations[localData.value.charset] || ''
  handleChange()
}
</script>

<style lang="scss" scoped>
.table-general-panel-v2 {
  .card {
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
  
  // 改进的输入框样式
  :deep(.el-input__wrapper) {
    &:hover {
      border-color: var(--el-color-primary-light-5);
    }
    
    &:focus-within {
      border-color: var(--el-color-primary);
      box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), 0.1);
    }
  }
  
  // 选择器样式
  :deep(.el-select) {
    .el-input__wrapper:hover {
      border-color: var(--el-color-primary-light-5);
    }
  }
  
  label {
    user-select: none;
  }
}

// 暗色模式
@media (prefers-color-scheme: dark) {
  .table-general-panel-v2 {
    .card {
      background-color: #2a2a2a;
      border-color: #3a3a3a;
      
      h3 {
        color: #e0e0e0;
      }
      
      label {
        color: #b0b0b0;
      }
    }
  }
}
</style> 